{% extends 'base.html' %}
{% load staticfiles %}
{% block page_head %}
    <link href="{% static 'bigday/css/invitation.css' %}" rel="stylesheet" xmlns="http://www.w3.org/1999/html">
{% endblock %}
{% block page_content %}
    <div class="container" id="invitation-body">
        <section class="video-container">
            <div class="responsive-video">
                <iframe src="https://www.youtube.com/embed/J_AIs7_Yu5A" frameborder="0" allowfullscreen></iframe>
            </div>
        </section>
        <section class="col-md-6 text-center">
            <div id="invitation-details">
            <h2>Zue and Luk Wedding</h2>
            <p class="lead">
                July 2, 2016, at 4:30 pm<br>
                Ravine Vineyard<br>
                Niagara-on-the-Lake, ON, Canada
            </p>
            </div>
        </section>
        <section class="col-md-6">
        <form data-toggle="validator" id="invitation-details" class="form-horizontal" method="post">
            <h2 id="rsvp-header" class="text-center">RSVP</h2>
            <div class="clearfix"></div>
            {% csrf_token %}
            {% for guest in party.ordered_guests.all %}
            <div class="form-group" data-is-child="{{ guest.is_child }}">
                {% with 'attending-'|add:guest.unique_id as attending_label %}
                <label for="{{ attending_label }}" class="col-sm-3 control-label">{{ guest.name }}</label>
                <label class="radio-inline">
                    <input class="attending-radio" type="radio" name="{{ attending_label }}" value="yes" {% if guest.is_attending %}checked="checked"{% endif %} required> will attend
                </label>
                <label class="radio-inline">
                    <input class="attending-radio" type="radio" name="{{ attending_label }}" value="no" {% if guest.is_attending == False %}checked="checked"{% endif %} required> will not attend
                </label>
                {% endwith %}
            </div>
            {% if not guest.is_child %}
            <div class="form-group">
                {% with 'meal-'|add:guest.unique_id as meal_label %}
                <label for="{{ meal_label }}" class="col-sm-3 control-label">... and will eat</label>
                {% for meal_id, meal_name in meals %}
                <label class="radio-inline">
                    <input type="radio" name="{{ meal_label }}" id="{{ meal_label }}-yes" value="{{ meal_id }}" {% if guest.meal == meal_id %}checked="checked"{% endif %} {% if guest.is_attending == False %}disabled{% endif %} required> {{ meal_name }}
                </label>
                {% endfor %}
                {% endwith %}
            </div>
            {% endif %}
            {% endfor %}
            <div class="form-group col-sm-12">
                <input type="text" name="comments" class="form-control" placeholder="Questions/comments/well wishes" >
            </div>
            <div class="form-group">
                <div class="text-center">
                    <input type="submit" class="btn btn-primary" value="Submit Response" />
                </div>
            </div>
        </form>
        </section>
    </div>
{% endblock %}
{% block page_js %}
    <script src="{% static 'validator.js' %}"></script>
    <script>
    $(function () {
        // enable/disable meal choices based on attendance
        $("input.attending-radio").change(function (e) {
            var target = $(e.target);
            if (target.closest('.form-group').data('is-child') === "True") {
                // don't attempt to update meals for children, who don't have them.
                return;
            }
            var value = target.attr('value');
            var mealButtonContainer = target.closest('.form-group').next('.form-group');
            var mealButtons = mealButtonContainer.find('[type=radio]');
            if (value === 'yes') {
                mealButtonContainer.removeClass('text-muted');
                mealButtons.each(function (index, button) {
                    button.disabled = false;
                    button.required = true;
                });
            } else if (value === "no") {
                mealButtonContainer.addClass('text-muted');
                mealButtons.each(function (index, button) {
                    button.checked = false;
                    button.disabled = true;
                    button.required = false;
                });
            }
            // reload validation
            $(document.forms[0]).validator('destroy');
            $(document.forms[0]).validator();
        });
    });
    </script>
{% endblock %}
